<!--产品分类的编辑维护页面-->
<template>
  <div>
    <Row v-has=tRole.PRODUCT_2_100>
      <i-col span="24" class-name="y_query_right">
        <Button type="info" to="/product/productClassification" >分类产品管理</Button>
      </i-col>
      <divider></divider>
    </Row>

    <div style="text-align: left; margin: 0rem 1rem;">
      <div v-if="status.selectedLevel1.index!==-1">
        <span class="tiy_key" style="display: inline;">{{classificationList[status.selectedLevel1.index].name}}的网址:</span>
        <span v-if="classificationList[status.selectedLevel1.index].shortLinkName!=''">
          {{$store.getters.webDomain+ classificationList[status.selectedLevel1.index].shortLinkName}}.html
        </span>
      </div>
      <div v-if="status.selectedLevel2.index!==-1">
        <span class="tiy_key" style="display: inline;">{{classificationList[status.selectedLevel1.index].name}} / {{secondClassificationList[status.selectedLevel2.index].name}}的网址:</span>
        <span v-if="secondClassificationList[status.selectedLevel2.index].shortLinkName!=''">
          {{$store.getters.webDomain+ secondClassificationList[status.selectedLevel2.index].shortLinkName}}.html
        </span>
      </div>
      <div v-if="status.selectedLevel3.index!==-1">
        <span class="tiy_key" style="display: inline;">{{classificationList[status.selectedLevel1.index].name}} / {{secondClassificationList[status.selectedLevel2.index].name}} / {{thirdClassificationList[status.selectedLevel3.index].name}}的网址:</span>
        <span v-if="thirdClassificationList[status.selectedLevel3.index].shortLinkName!=''">
          {{$store.getters.webDomain+ thirdClassificationList[status.selectedLevel3.index].shortLinkName}}.html
        </span>
      </div>
    </div>

    <Row style="padding: 1rem">
      <i-col :xs="{ span: 24, offset: 0 }" :sm="{ span: 8, offset:0 }">
        <ul class="ul_1">
          <li class="title">
            <i-col span="16">一级分类</i-col>
            <i-col span="8" style="text-align: right">
              <a href="#" @click="sortClassification(1)" v-show="authSort" style="font-size: 14px" >排序</a>
              <Tooltip content="新建一级分类">
                <a href="#" @click="classificationAdd(1)" v-show="authAdd">
                  <Icon type="md-add"></Icon>
                </a>
              </Tooltip>
            </i-col>

          </li>
          <template v-for="(classification,index) in classificationList">
            <li @click="toggle(classification,index)" :class="{active:index===status.selectedLevel1.index}">
              <Row>
                <i-col span="22">
                  <a href="#" style="padding-left: 0.5rem;word-wrap:break-word;font-size: 13px">
                    <Icon type="md-square" v-show="classification.type===2" style="opacity:0.3"/>
                    {{classification.name}}
                    <span class="disabled" v-show="classification.state===1" style="font-size: 12px;margin-left: 0.3rem">(未启用)</span>
                    <span class="disabled" v-show="classification.isPlaceholder" style="font-size: 12px;margin-left: 0.3rem">(占位分类)</span>
                  </a>
                </i-col>
                <i-col span="2" v-show="authAdd">
                  <Poptip trigger="hover" placement="bottom">
                    <Icon type="md-more" color="#e1bee7"  style="padding: 0.3rem 0.5rem"
                    />
                    <div slot="title">分类: {{classification.name}}</div>
                    <div slot="content">
                      <div >
                        <a @click="classificationEdit(classification.id)" v-show="authModify">
                          <Icon type="md-create" style="margin: 0px 1rem"/>编辑</a>
                        <a @click="classificationDelete(classification.id,1, classification.name)" v-show="authDelete">
                          <Icon type="md-trash" style="margin: 0px 1rem"/>删除</a>
                      </div>
                    </div>
                  </Poptip>
                </i-col>
              </Row>
            </li>
          </template>
        </ul>
      </i-col>

      <i-col :xs="{ span: 24, offset: 0 }" :sm="{ span: 8, offset:0 }">
        <ul class="ul_2">
          <li class="title">
            <i-col span="16">二级分类</i-col>
            <i-col span="8" style="text-align: right">
              <a href="#" @click="sortClassification(2)" v-show="authSort" style="font-size: 14px" >排序</a>
              <Tooltip content="新建二级分类">
                <a href="#" @click="classificationAdd(2)" v-show="authAdd">
                  <Icon type="md-add"></Icon>
                </a>
              </Tooltip>
            </i-col>

          </li>
          <template v-for="(classification,index) in secondClassificationList">
            <li @click="toggle(classification,index)" :class="{active:index===status.selectedLevel2.index}">
              <Row>
                <i-col span="22">
                  <a href="#" style="padding-left: 0.5rem;word-wrap:break-word;font-size: 13px;">
                    <Icon type="md-square" v-show="classification.type===2" style="opacity:0.3"/>
                    {{classification.name}}
                    <span class="disabled" v-show="classification.state===1" style="font-size: 12px;margin-left: 0.3rem">(未启用)</span>
                    <span class="disabled" v-show="classification.isPlaceholder" style="font-size: 12px;margin-left: 0.3rem">(占位分类)</span>
                  </a>
                </i-col>

                <i-col span="2">
                  <Poptip trigger="hover" placement="bottom">
                    <Icon type="md-more" color="#e1bee7" style="padding: 0.3rem 0.5rem"/>
                    <div slot="title">分类 : {{classification.name}}</div>
                    <div slot="content">
                      <div >
                        <a @click="classificationMove(2,index)" v-show="authMove">
                          <Icon type="md-redo" style="margin: 0px 1rem"/>迁移</a>
                        <a @click="classificationEdit(classification.id)" v-show="authModify">
                          <Icon type="md-create" style="margin: 0px 1rem"/>编辑</a>
                        <a @click="classificationDelete(classification.id,2, classification.name)" v-show="authDelete">
                          <Icon type="md-trash" style="margin: 0px 1rem"/>删除</a>
                      </div>
                    </div>
                  </Poptip>
                </i-col>
              </Row>
            </li>
          </template>
        </ul>
      </i-col>
      <i-col :xs="{ span: 24, offset: 0 }" :sm="{ span: 8, offset:0 }">
        <ul class="ul_2">
          <li class="title">
            <i-col span="16">三级分类</i-col>
            <i-col span="8" style="text-align: right">
              <a href="#" @click="sortClassification(3)" v-show="authSort" style="font-size: 14px" >排序</a>
              <Tooltip content="新建三级分类">
                <a href="#" @click="classificationAdd(3)" v-show="authAdd">
                  <Icon type="md-add"></Icon>
                </a>
              </Tooltip>
            </i-col>

          </li>
          <template v-for="(classification,index) in thirdClassificationList">
            <li @click="toggle(classification, index)" :class="{active:index===status.selectedLevel3.index}">
              <Row>
                <i-col span="22">
                  <a href="#" style="padding-left: 0.5rem;word-wrap:break-word;font-size: 13px">
                    <Icon type="md-square" v-show="classification.type===2" style="opacity:0.3"/>
                    {{classification.name}}
                    <span class="disabled" v-show="classification.state===1" style="font-size: 12px;margin-left: 0.3rem">(未启用)</span>
                    <span class="disabled" v-show="classification.isPlaceholder" style="font-size: 12px;margin-left: 0.3rem">(占位分类)</span>
                  </a>
                </i-col>
                <i-col span="2">
                  <Poptip trigger="hover" placement="left">
                    <Icon type="md-more" color="#e1bee7"/>
                    <div slot="title">分类 : {{classification.name}}</div>
                    <div slot="content">
                      <div >
                        <a @click="classificationMove(3,index)" v-show="authMove">
                          <Icon type="md-redo" style="margin: 0px 1rem"/>迁移</a>
                        <a @click="classificationEdit(classification.id)" v-show="authModify">
                          <Icon type="md-create" style="margin: 0px 1rem"/>编辑</a>
                        <a @click="classificationDelete(classification.id,3, classification.name)" v-show="authDelete">
                          <Icon type="md-trash" style="margin: 0px 1rem"/>删除</a>
                      </div>
                    </div>
                  </Poptip>
                </i-col>
              </Row>
            </li>
          </template>
        </ul>
      </i-col>
    </Row>

    <Modal v-model="addModal.isShow" :title="addModal.title"
      :mask-closable="false"
      :loading="addModal.isLoading" :styles="{top: '20px',width:'70%'}">
      <Form :model="param.classification" :label-width="110" ref="classificationSimple"  :rules="ruleClassification">
        <div style="padding: 1rem 0px">
          <Row style="width: 100%;">
            <i-col span="14">
              <FormItem label="分类名称 :" prop="name">
                <Input v-model.trim="param.classification.name" style="width: 90%"
                       class="form_step"></Input>
              </FormItem>
            </i-col>

            <i-col span="10">
              <FormItem label="是否启用 :" inline prop="state">
                <i-switch v-model="param.classification.state" :true-value="0" :false-value="1" @on-change="changeState"></i-switch>
              </FormItem>
            </i-col>
          </Row>

          <Row>
            <i-col span="24">
              <FormItem label="是否占位分类:" inline prop="isPlaceholder" v-show="false">
                <i-switch v-model="param.classification.isPlaceholder" v-if="param.classification.level === 1"
                          @on-change="isPlaceholderChange"
                          :disabled="status.isAdd === false || param.classification.level !== 1"></i-switch>

                <Tag v-else>{{param.classification.isPlaceholder?"占位分类":""}}</Tag>

                <span class="base_key" v-show="param.classification.level === 1" >占位分类的子类也会自动被设置为占位分类！该值仅能在新建时修改。</span>
              </FormItem>

            </i-col>
          </Row>

          <Row v-if="!param.classification.isPlaceholder">
            <i-col span="24">
              <FormItem label="分类类型:" inline prop="type">
                <Select placeholder="分类类型" v-model="param.classification.type"
                        :disabled="status.isAdd === false ||(param.classification.type==2&&param.classification.level !==1)" class="y_condition"
                        style="text-align: left;">
                  <Option v-for="item in classificationTypeDict" :value="item.value" :key="item.value">{{item.name }}</Option>
                </Select>
                <div class="base_key"  v-show="param.classification.type===2">
                  展厅分类: 只能关联展厅, 且其子分类也只能是展厅分类.
                </div>

              </FormItem>
            </i-col>
          </Row>

          <Row v-if="!param.classification.isPlaceholder">
            <i-col span="12">
              <Row>
                <i-col span="24">
                <FormItem label="分类图（PC端）: " prop="icon" :label-width="140">
                  <Button type="primary" class="" @click="selectImages(false,true,5, 1)">
                    选择图片
                  </Button>
                  <Input v-model.trim="param.classification.icon" style="display: none"></Input>
                </FormItem>
                </i-col>
              </Row>
              <Row v-if="param.classification.icon">
                <i-col span="16" offset="8">
                  <img :src="yunPath + param.classification.icon" height="90"
                       style="background: #fafafa;padding: 5px" @click="showImage(yunPath + param.classification.icon)"/>
                </i-col>
              </Row>
            </i-col>
            <i-col span="12">
              <Row>
                <i-col span="24">
                  <FormItem label="分类图（手机端）: " prop="icon" :label-width="150">
                    <Button type="primary" class="" @click="selectImages(false,true,5, 2)">
                      选择图片
                    </Button>
                    <Input v-model.trim="param.classification.mobileIcon" style="display: none"></Input>
                  </FormItem>
                </i-col>
              </Row>
              <Row v-if="param.classification.mobileIcon">
                <i-col span="16" offset="8">
                  <img :src="yunPath + param.classification.mobileIcon" height="90"
                       style="background: #fafafa;padding: 5px" @click="showImage(yunPath + param.classification.mobileIcon)"/>
                </i-col>
              </Row>
            </i-col>
          </Row>


          <Row v-if="(param.classification.level == 2 || param.classification.level == 3 )&&param.classification.type==1">
            <divider></divider>
            <i-col span="20">
              <FormItem label="SEO关键字: " prop="keyword">
                <Input v-model.trim="param.classification.keyword" style="width: 90%" placeholder="用户搜索哪些词时与该分类中的产品密切相关，用分号;分割"
                       class="form_step"></Input>
              </FormItem>
            </i-col>
          </Row>


          <Row v-has=tRole.PRODUCT_2_202 style="display: block;" v-if="param.classification.type==1">
            <alert type="warning"> <Badge status="success" />以下属性请慎重修改。</alert>
            <Row>
              <i-col span="24">
                <FormItem label="固定网址: " prop="shortLinkName">
                  <Input v-model.trim="param.classification.shortLinkName" style="width: 90%"
                         :readonly="param.classification.isPlaceholder && status.isAdd == false"
                         class="form_step" @on-change="trimShortLinkName" >
                    <span slot="prepend"></span>
                    <span slot="append">.html</span>
                  </Input>
                  <span style="color: #c1c1c1">{{$store.getters.webDomain+param.classification.shortLinkName}}.html   此地址一旦修改将会导致SEO成绩清零，慎重操作</span>
                </FormItem>
              </i-col>
            </Row>

          </Row>
         <Row v-has=tRole.PRODUCT_2_202 v-if="param.classification.type==1">
            <i-col span="20">
              <FormItem label="页面底部描述-1: " prop="detailDesc">
                <span>用于搜索优化，可以是html代码片段</span>
                <Input type="textarea" v-model.trim="param.classification.detailDesc" :rows="4" class="form_step" placeholder="SEO专用，展厅上线后将废弃"></Input>
              </FormItem>
            </i-col>
            <i-col span="20">
              <FormItem label="页面底部描述-2: " prop="description">
                <Input type="textarea" v-model.trim="param.classification.description" class="form_step" placeholder="SEO专用，展厅上线后将废弃"></Input>
              </FormItem>
            </i-col>
          </Row>

          <Row v-has=tRole.PRODUCT_2_202 style="display: block;" v-if="param.classification.type===2">
            <divider></divider>
<!--            <alert >-->
<!--              <Badge :status="param.showroomSelected.showroomId!=''?'success':'warning'" />-->
<!--              {{param.showroomSelected.showroomId!=''?'已关联展厅':'未关联展厅'}}-->
<!--            </alert>-->
            <Row v-if="param.showroomSelected.showroomId!=''" style="padding:.8rem">
<!--              <div style="width:40%">-->
<!--                <label class="ivu-form-item-label">展厅标题</label>-->
<!--                <span class="ivu-form-item-content" v-text="param.showroomSelected.title"></span>-->
<!--              </div>-->
              <div>
                <KeyValueView title="展厅地址">
                <a :href="$store.getters.webDomain+param.showroomSelected.shortLink" target="_blank">
                  {{$store.getters.webDomain+param.showroomSelected.shortLink}}
                </a>
                  <Button ghost type="info" size="small" style="margin-left: 1rem" v-show="param.showroomSelected.showroomId!==''"  @click="toEditStandRoom()">编辑</Button>
                  <Button ghost type="info" size="small" style="margin-left: 1rem" v-show="param.showroomSelected.showroomId!==''" @click="cancelShowroom()">删除</Button>
                </KeyValueView>
              </div>
            </Row>
            <Button  style="margin-left: 1rem" type="success" @click="selectShowroom()" v-text="param.showroomSelected.showroomId===''?'关联展厅':'更换展厅'"></Button>
          </Row>
          <div>

            <Row>

              <Button ghost type="info" size="small" style="margin-left: 1rem"
                      v-show="param.classification.type===1"  @click="toEditStandRoom()">编辑展厅</Button>
            </Row>

          </div>
        </div>
      </Form>
      <div slot="footer">
        <Button @click="addModal.isShow=false">取消</Button>
        <Button type="primary" @click="classificationWebAddOrModify()">保存</Button>
      </div>
    </Modal>

    <!--图片选择框-->
    <Modal
      v-model="addModal.modalImageSelect.isShow"
      title="单击选择图片"
      :styles="{top: '20px',bottom:'20px',}"
      width="70%" height="1000">
      <div slot="footer"></div>
      <a-image :hideleft="true"
               @cancelClicked="addModal.modalImageSelect.isShow=false"
               @sureClicked="seletedImage" ></a-image>
    </Modal>

    <!--确认弹出框-->
    <Modal
      v-model="status.modalAction.isShow"
      :title="status.modalAction.title"
      :loading="status.modalAction.isLoading"
      @on-ok="actionDelete">
      <br>
      <p>{{status.modalAction.content}}?</p>
      <br>
    </Modal>

    <!--排序弹出框-->
    <Modal
      v-model="status.modalSort.isShow"
      :title="status.modalSort.title"
      :loading="status.modalSort.isLoading"
      @on-ok="saveSort">
      <div style="margin: 1rem">
        <div style="font-size: 1em;text-align: center"><strong> * 拖动当前行到指定位置便可完成排序</strong></div>

        <Table stripe border :context="this" :columns="sortTableTitles" :data="sortData.sortList"
               :draggable="true" @on-drag-drop="sortSequence"
               class="base_table"
               no-data-text="暂无数据"></Table>
      </div>
    </Modal>

    <!--迁移弹出框-->
    <Modal
      v-model="status.modalMove.isShow"
      :title="status.modalMove.title"
      :loading="status.modalMove.isLoading"
      @on-ok="saveMove">
      <div style="margin: 1rem">
        <div style="font-size: 1em;text-align: center"><strong> {{param.moveCategory.classification.level}}级分类
          {{param.moveCategory.classification.name}} 的迁移</strong></div>
        <RadioGroup v-model="param.moveCategory.selectParentClassificationId" vertical>
          <Radio v-for="item in param.moveCategory.parentList" :label="item.id"
                 :disabled="(item.id == param.moveCategory.classification.parentId ||param.moveCategory.classification.type!=item.type || item.isPlaceholder !== param.moveCategory.classification.isPlaceholder)">
            <span>{{item.name}}</span>
          </Radio>
        </RadioGroup>
      </div>
    </Modal>
    <!-- 聚合展厅选择关联展厅 -->
    <Modal v-model="status.modalShowroom.isShow" title="关联普通展厅" :mask-closable="false" :width="1000">
      <showroom-selection @query-list="queryShowroomList" :is-single-select="true" :limit-platforms="[]" :category-list="[]"></showroom-selection>
      <div slot="footer">
        <Button @click="hideShowroomSelectionModal()">取消</Button>
        <Button type="primary" @click="modifyShowroom()">确定</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import AImage from "../image/ImageSelect.vue"
  import {VueComputed,VueMethods,VueMounted} from "./js/classification/VueIndex";
  import tiyData from "./js/classification/classification_data";
  import ShowroomSelection from "../stands/showroomSelect/ShowroomSelection";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    components: {KeyValueView, ICol, AImage,ShowroomSelection},
    data() {
      return {
          tRole:{
              PRODUCT_2_202: "PRODUCT-2-202",
              PRODUCT_2_100: "PRODUCT-2-100",
          },
        classificationList: tiyData.tData.classificationList,
        secondClassificationList: tiyData.tData.secondClassificationList,
        thirdClassificationList: tiyData.tData.thirdClassificationList,
        tempRecommand:{
          name:'',
          url:'',
          decription:''
        },
        param: tiyData.tParam,
        stateDict: this.$store.getters.dictionaries.stateDict,
        addModal: tiyData.addModal,
        yunPath: this.$store.getters.imgPrefix,
        ruleClassification: tiyData.addModal.rules,
        status: tiyData.status,
        poptipVisible: true,
        sortData:tiyData.tData.sortData,
        sortTableTitles:tiyData.sortTitles,
          data: tiyData.tData,
        pageMetaInfo:{
              title:'',
              description:'',
              keywords:''
        }
      }
    },
    computed: VueComputed,
    methods: VueMethods,
    mounted :VueMounted
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional) "js/classification/category.less";
</style>
